<template>
  <div>
    <a target="_blank" href="https://element-plus.org/zh-CN/component/timeline.html"
      >https://element-plus.org/zh-CN/component/timeline.html
    </a>
  </div>
  <div class="hr das"></div>
  <div>
    <el-dropdown>
      <span class="el-dropdown-link">
        Dropdown List
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>Action 1</el-dropdown-item>
          <el-dropdown-item>Action 2</el-dropdown-item>
          <el-dropdown-item>Action 3</el-dropdown-item>
          <el-dropdown-item disabled>Action 4</el-dropdown-item>
          <el-dropdown-item divided>Action 5</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ htm }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
  <div class="hr das"></div>
  <div>
    <el-timeline>
      <el-timeline-item timestamp="2018/4/12" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/12 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/3 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/2 20:46</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ htm2 }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
  <div class="hr das"></div>
  <div>
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities3"
        :key="index"
        :icon="activity.icon"
        :type="activity.type"
        :color="activity.color"
        :size="activity.size"
        :hollow="activity.hollow"
        :timestamp="activity.timestamp"
      >
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline>
  </div>

  <!-- 页面代码 源码 -->
  <dropWrap key="oreo">
    <pre><code class="language-js">{{ htm3 }} </code></pre>
  </dropWrap>
  <!-- 页面代码 源码 -->
</template>
      <script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import { MoreFilled } from "@element-plus/icons-vue";
import { demoProps } from "@/stores/modules/merakDemo";
import dropWrap from "../dropWrap.vue";
import Prism from "prismjs";
import "../prism.css";

const activities = [
  {
    content: "Event start",
    timestamp: "2018-04-15"
  },
  {
    content: "Approved",
    timestamp: "2018-04-13"
  },
  {
    content: "Success",
    timestamp: "2018-04-11"
  }
];

const activities3 = [
  {
    content: "Custom icon",
    timestamp: "2018-04-12 20:46",
    size: "large",
    type: "primary",
    icon: MoreFilled
  },
  {
    content: "Custom color",
    timestamp: "2018-04-03 20:46",
    color: "#0bbd87"
  },
  {
    content: "Custom size",
    timestamp: "2018-04-03 20:46",
    size: "large"
  },
  {
    content: "Custom hollow",
    timestamp: "2018-04-03 20:46",
    type: "primary",
    hollow: true
  },
  {
    content: "Default node",
    timestamp: "2018-04-03 20:46"
  }
];

let htm = ref<string>(`
    <el-timeline>
      <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp">
        {{ activity.content }}
      </el-timeline-item>
    </el-timeline> 

    const activities = [
        {
            content: 'Event start',
            timestamp: '2018-04-15',
        },
        {
            content: 'Approved',
            timestamp: '2018-04-13',
        },
        {
            content: 'Success',
            timestamp: '2018-04-11',
        },
     ]
    `);
let htm2 = ref<string>(`
    <el-timeline>
      <el-timeline-item timestamp="2018/4/12" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/12 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/3 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/2 20:46</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
    `);
let htm3 = ref<string>(`
    <el-timeline>
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      :icon="activity.icon"
      :type="activity.type"
      :color="activity.color"
      :size="activity.size"
      :hollow="activity.hollow"
      :timestamp="activity.timestamp"
    >
      {{ activity.content }}
    </el-timeline-item>
  </el-timeline>

  const activities = [
        {
            content: 'Custom icon',
            timestamp: '2018-04-12 20:46',
            size: 'large',
            type: 'primary',
            icon: MoreFilled,
        },
        {
            content: 'Custom color',
            timestamp: '2018-04-03 20:46',
            color: '#0bbd87',
        },
        {
            content: 'Custom size',
            timestamp: '2018-04-03 20:46',
            size: 'large',
        },
        {
            content: 'Custom hollow',
            timestamp: '2018-04-03 20:46',
            type: 'primary',
            hollow: true,
        },
        {
            content: 'Default node',
            timestamp: '2018-04-03 20:46',
        },
        ]
    `);

/* 生命周期 */
onMounted(() => {
  nextTick(() => {
    Prism.highlightAll();
  });
});
</script>
      <style lang="scss" scoped>
</style>